<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html class=" -webkit-">
	<head>		
		<meta charset="utf-8">
		<title>杰利联合</title>
		<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
		<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
		<meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type">
		<meta content="no-cache,must-revalidate" http-equiv="Cache-Control">
		<meta content="no-cache" http-equiv="pragma">
		<meta content="0" http-equiv="expires">
		<meta content="telephone=no, address=no" name="format-detection">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
		<link rel="stylesheet" type="text/css" href="${ctxStatic}/jiu/css/mobile_module.css?v=1492670468" media="all">
		<script type="text/javascript">
			//静态变量
			var IMG_PATH = "/Public/Home/images";
			var STATIC_PATH = "/Public/static";
			var SITE_URL = "";
			var WX_APPID = "";
			var WXJS_TIMESTAMP = '';
			var NONCESTR = '';
			var SIGNATURE = '';
		</script>
		<script type="text/javascript" src="${ctxStatic}/jiu/js/jquery-2.0.3.min.js"></script>
		<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
		<script type="text/javascript" src="${ctxStatic}/jiu/js/prefixfree.min.js?v=1492670468"></script>
		<script type="text/javascript" src="${ctxStatic}/jiu/js/dialog.js?v=1492670468"></script>
		<script type="text/javascript" src="${ctxStatic}/jiu/js/flipsnap.min.js?v=1492670468"></script>
		<script type="text/javascript" src="${ctxStatic}/jiu/js/mobile_module.js?v=1492670468"></script>
		<link href="${ctxStatic}/jiu/css/common.css?v=1492670468" rel="stylesheet" type="text/css">
		<link href="${ctxStatic}/jiu/css/shop.css?v=14" rel="stylesheet" type="text/css">	
			<script type="text/javascript" src="http://www.zhangxinxu.com/study/js/mini/jquery.scrollLoading-min.js"></script>
	</head>
	<body class="withFoot">
		<style>
			.shoplog {
				position: absolute;
				top: -20px;
				z-index: 100;
				width: 60px;
				height: 60px;
				border: 2px solid #888;
				border-radius: 36px;
				padding: 1px;
				background-color: #FFFFFF;
			}
		</style>
		<div class="container">

			<div class="search_form">
				<a href="javascript:void(0);" class="cate_icon"> </a>
				<input type="text" placeholder="请输入产品名称" value="" name="search_key" id="search_key">

				<button type="button" id="search" onclick="searchCommodity()">搜索</button>
			</div>
			<!-- banner -->
				<div class="banner" style="height: 187.5px;">
				<ul style="width: 1125px; height: 187.5px; transition-property: transform; transition-timing-function: cubic-bezier(0, 0, 0.25, 1); transition-duration: 350ms; transform: translate3d(-750px, 0px, 0px);">
					<c:forEach items="${jiuCarouselList}" var="jiuCarousel">
						<li style="width: 375px; height: 187.5px;">
							<a href="${jiuCarousel.url}"><img src="${ctxUser }/jiu/${jiuCarousel.ico}" style="width: 375px; height: 187.5px;"></a>
						</li>
					</c:forEach>
				</ul>
				<span class="identify"> 
					<c:forEach items="${jiuCarouselList}" var="jiuCarousel"   varStatus="vstatus">
			            <em class="${vstatus.index eq 0?'cur':''}"></em>
					</c:forEach>                 	
           		</span>
			</div>
			
			<h6 class="cate_title">商品分类</h6>
			<div class="shop_fenlie">
				<ul>
					<c:forEach items="${jiuCommodityClassList}" var="jiuCommodityClass">
						<li style="text-align: center; line-height: 25px; display: inline-flex;">
							<a href="javascript:;" onclick="showPopCategory(${jiuCommodityClass.id})">
								<img class="scrollLoading" data-url="${ctxUser }/jiu/${jiuCommodityClass.ico}" src="${ctxUser }/jiu/${jiuCommodityClass.ico}" style="vertical-align: top;" width="40px"><br>${jiuCommodityClass.name}
							</a>
						</li>
					</c:forEach>
				</ul>
			</div>

			<!-- 推荐商品 -->
			<c:if test="${not empty jiuCommodityList}">
				<div class="recommend_list">
					<h6 class="cate_title">新品上架</h6>
					<div class="product_list2">
						<ul>
							<c:forEach items="${jiuCommodityList}" var="jiuCommodity">
								<li>
									<a href="javascript:commodityDetails(${jiuCommodity.id})">
										<img class="scrollLoading" data-url="${ctxUser }/jiu/${jiuCommodity.ico}" src="${ctxUser }/jiu/${jiuCommodity.ico}">
										<div class="desc">
											<p class="name">${jiuCommodity.name}</p>
	                            			<p class="price">${jiuCommodity.price}积分/${jiuCommodity.unit}</p>
										</div>
									</a>
								</li>
							</c:forEach>
						</ul>
					</div>
				</div>
            </c:if>
			
			<!-- 所有商品 -->
			<c:if test="${not empty jiuCommodityAllLisr}">

            </c:if>
			<div class="recommend_list">
				<h6 class="cate_title">所有商品</h6>
				<div class="product_list2">
					<ul id="productContainer"> 
						<%-- <c:forEach items="${jiuCommodityAllList}" var="jiuCommodity">
							<li>
								<a href="javascript:commodityDetails(${jiuCommodity.id})">
									<img class="scrollLoading" data-url="${ctxUser }/jiu/${jiuCommodity.ico}" src="${ctxUser }/jiu/${jiuCommodity.ico}">
									<div class="desc">
										<p class="name">${jiuCommodity.name}</p>
                            			<p class="price">${jiuCommodity.price}积分/${jiuCommodity.unit}</p>
									</div>
								</a>
							</li>
						</c:forEach> --%>
					</ul>
				</div>

			</div>

		</div>
		<section class="pop_category" style="display:none">
	<div class="pop_category_head">
		<a href="javascript:;" onclick="hidePopCategory()">取消</a>
	</div>
	<ul>
		<c:forEach items="${commodityClassList}" var="commodityClass">
				<li class="firstcategory" id="${commodityClass.yiji.id}" style="display:none">
					<a href="javascript:commodityList(${commodityClass.yiji.id})"><img src="${ctxUser }/jiu/${commodityClass.yiji.ico}" style="vertical-align: top;" width="20px"> ${commodityClass.yiji.name}</a>
					<ul>
						<c:forEach items="${commodityClass.erji}" var="comClass">
							<li>
								<a href="javascript:commodityList(${comClass.id})"> <img src="${ctxUser }/jiu/${comClass.ico}" style="vertical-align: top;" width="20px"> ${comClass.name}</a>
							</li>
						</c:forEach>
					</ul>
				</li>
		</c:forEach>
		
	</ul>
</section>
		<script type="text/javascript">
			function showPopCategory(id) {
				$('body').addClass('noscroll');
				$('.pop_category').addClass('show_category').show();
				if(id) {
					$('#' + id).css('display', 'block');
				}
			}

			function hidePopCategory() {
				$('body').removeClass('noscroll');
				$('.pop_category').removeClass('show_category').hide();
				$('.pop_category .firstcategory').css('display', 'none');
			}
		</script>
		<!-- 底部导航 -->
		<%@ include file="/WEB-INF/views/modules/jiuFront/footer.jsp"%>
		
		
		<script type="text/javascript">
			$(function() {
				$(".scrollLoading").scrollLoading();
				//通用banner 滑动
				$.WeiPHP.initBanner(true, 5000);

				$("#search_key").bind('keyup',function(event){
				    event=document.all?window.event:event;
				    if((event.keyCode || event.which)==13){
				    	searchCommodity();
				    }
				   });
			})
			
			function searchCommodity(){
				var name=$('#search_key').val();
				window.location.href="${ctxFront }/jiu/searchCommodity?uid=${uid}&name="+name;
			}
			
			//商品列表
			function commodityList(id){
				window.location.href="${ctxFront }/jiu/commodityList?uid=${uid}&commodityClassId="+id+"&v="+Math.random();
			}
			
			//商品详情
			function commodityDetails(id){
				window.location.href="${ctxFront }/jiu/commodityDetails?uid=${uid}&commodityId="+id+"&v="+Math.random();
			}
		</script>	
		
<script type="text/javascript">

 
//获取滚动条当前的位置 

function getScrollTop() { 

var scrollTop = 0; 

if (document.documentElement && document.documentElement.scrollTop) { 

scrollTop = document.documentElement.scrollTop; 

} 

else if (document.body) { 

scrollTop = document.body.scrollTop; 

} 

return scrollTop; 

} 



//获取当前可是范围的高度 

function getClientHeight() { 

var clientHeight = 0; 

if (document.body.clientHeight && document.documentElement.clientHeight) { 

clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight); 

} 

else { 

clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight); 

} 

return clientHeight; 

} 



//获取文档完整的高度 

function getScrollHeight() { 

return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight); 

} 



window.onscroll = function () {

	$("#tip").html("请等待正在加载中……");

if (getScrollTop() + getClientHeight() == getScrollHeight()) { 
	if(pageNo!='1'){
		pullupRefresh();
	}

	$("#tip").html("上拉加载更多");

}

} 

$(function(){
	pullupRefresh();
	
});


var pageNo = 1;


/**

 * 上拉加载具体业务实现

 */

 var ajaxFlag = 1;

function pullupRefresh() {
	
	/* $("#tip").html("正在加载中");

	if(ajaxFlag==0){

		return ;

	} */


	 $.get("${ctxFront}/jiu/ajaxCommodity?v="+Math.random(), {uid:"${uid}",pageNo: pageNo,pageSize:15,commodityClassId:"${commodityClassId}",name:"${name}"}, function(data){

		pageNo++;

		var list = data.result;
		 
		 var innerHTML= "";
		 
		 console.log(data);

		$.each(list, function(i, n){
			
			 innerHTML+='<li class="contentItem" >'+
					          '<a href="javascript:commodityDetails('+n.id+')">'+
					             '<img class="scrollLoading" src="${ctxUser }/jiu/'+n.ico+'">'+
					              '<div class="desc">'+
					              	'<p class="name">'+n.name+'</p>'+
					              	'<p class="price">'+n.price+'积分/'+n.unit+'</p>'+
					              '</div>'+
					         '</a>'+
					  	'</li>';
		 });
		 $("#productContainer").append(innerHTML);
	  }); 

}
</script>		
	</body>
</html>